<template>
  <div class="ma-content-block  p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #operationBeforeExtend="{ record }">
        <a-link @click="openShow(record)" v-auth="['financial:payOrder:mx']">明细</a-link>
        <a-link @click="checkRef.open(record)" v-if='record.status == 0' v-auth="['financial:periodic:js']">结算</a-link>
      </template>
      <template #pay_price="{ record }">
        <div >￥{{record?.pay_price}}</div>
      </template>
      <template #order_date_between="{ record }">
        <div v-if="record?.order_date_between.length != 0">
          <div v-for="(item,index) in record?.order_date_between" :key="index">{{item}}</div>
        </div>
      </template>
      
    </ma-crud>
    <div class='lg:flex'>
      <div style='width:300px'>小计：{{xiaoji}}</div>
      <div>合计：{{heji}}</div>
    </div>
    <ma-form-modal
        title="结算订单"
        ref="checkRef"
        :columns="checkColumns"
        :submit="check"
    />
    <a-modal :mask-closable="false"  v-model:visible="visible" :width="1400" title="账单">
      <div v-if="visible">
        <a-alert>
          账单日期: {{ info.order_date_between[0] }} ~ {{ info.order_date_between[1] }}
        </a-alert>
        <PayOrderList

            ref="payOrderRef"
        />
      </div>

    </a-modal>
  </div>
</template>
<script setup>
import {ref, reactive, nextTick} from 'vue'
import financialPeriodic from '@/api/financial/financialPeriodic'
import { Message } from '@arco-design/web-vue'
import { request } from "@/utils/request.js";
import tool from '@/utils/tool'
import PayOrderList from "@/views/financial/payOrder/indexs.vue"
import MaFormModal from "@/components/ma-form-modal/index.vue"
import * as common from '@/utils/common'
import FinancialPeriodic from "@/api/financial/financialPeriodic";
import {cloneDeep} from "lodash";

const crudRef = ref()
const visible = ref()
const checkRef = ref()
const payOrderRef = ref()
const xiaoji = ref()
const heji = ref()
const checkColumns = [
  {
    title: "备注",
    dataIndex: "remark",
    formType: "textarea"
  }
]
const check = async (row) => {
  let data = cloneDeep(row)
  data.settle_date = tool.dateFormat((new Date()))
  data.status = 1;
  let res = await FinancialPeriodic.update(data.id, data)
  if (res.success) {
    Message.success(res.message)
    crudRef.value.refresh()
    return true
  }
  return false
}

const info = ref({})

const openShow = async (item) => {
  info.value = item
  visible.value = true
  await nextTick()
  payOrderRef.value.crudRef.requestParams = Object.assign(payOrderRef.value.crudRef.requestParams, {
    dept_id: item.dept_id,
    created_at: item.order_date_between,
    pay_type:'periodic',
    pay_status: '1'
  })
  payOrderRef.value.crudRef.crudSearchRef.setSearchHidden()
  payOrderRef.value.crudRef.refresh()

}

const options = reactive({
  id: 'flyos_financial_periodic',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  operationColumn: true,
  operationWidth: 160,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: financialPeriodic.getList,
  // add: {
  //   show: true,
  //   api: financialPeriodic.save,
  //   auth: ['financial:periodic:save']
  // },
  // edit: {
  //   show: true,
  //   api: financialPeriodic.update,
  //   auth: ['financial:periodic:update']
  // },
  // delete: {
  //   show: true,
  //   api: financialPeriodic.deletes,
  //   auth: ['financial:periodic:delete']
  // }
  export: {
    show: true,
    url: 'financial/periodic/export',
    auth: ['financial:periodic:export']
  },
  beforeRequest: (params) => {
        request({
          url:'financial/periodic/total',
          method: 'get',
          params,
        }).then(res=>{
          heji.value = res.data.total
        })
	},
  afterRequest: (params) => {
      let num = 0
      params.map((v, i) => {
        num += (v.pay_price - 0)
      })
      // request({
      //   url:'financial/periodic/total',
      //   method: 'get',
      //   params:{
            
      //   },
      // }).then(res=>{
      //   heji.value = res.message
      // })
      xiaoji.value = num.toFixed(2)
    },
})

const columns = reactive([
  {
    title: "",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {
    title: "公司",
    dataIndex: "dept_id",
    common: true,
  },
  {
    title: "出账日",
    dataIndex: "start_date",
    formType: "date",
    search: true,
    showTime: true
  },
  {
    title: "结算日",
    dataIndex: "end_date",
    formType: "date",
    search: true,
    showTime: true
  },
  {
    title: "账单周期",
    dataIndex: "order_date_between",
    formType: "range",
    search: false,
    showTime: true
  },
  {
    title: "结算金额",
    dataIndex: "pay_price",
    formType: "input",
  },
  {
    title: "类型",
    dataIndex: "status",
    formType: "select",
    search: true,
    dict: {
      data: [
        {
          label: "已结算",
          value: "1"
        },
        {
          label: "未结算",
          value: "0"
        }
      ],
      translation: true
    }
  },
  {
    title: "结算日期",
    dataIndex: "settle_date",
    formType: "date",
    search: true,
    showTime: true
  },
  {
    title: "备注",
    dataIndex: "remark"
  }
])
</script>
<script> export default { name: 'financial:periodic' } </script>
